<template>
    <div class="NewPage">
        <div class="Logo">
            <img src="./assets/logo.png" alt="logo">
        </div>
        <div class="LoginForm">
            <h1>登录</h1>
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
                <el-form-item  prop="name">
                    <el-input placeholder="请输入用户名" v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item  prop="password">
                    <el-input placeholder="请输入密码" v-model="ruleForm.password" />
                </el-form-item>
                <div class="ForgetSecret">
                    <span @click="ForgetSecret(ruleFormRef)">忘记密码</span>
                </div>
                <el-form-item>
                    <el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
                </el-form-item>
            </el-form>
            <div class="Feature">                           
                还没账号,<span class="FeatureLink">注册账号</span> 或者 <span  class="FeatureLink">微信扫码登录</span>
            </div>
        </div>
    </div>
</template>


<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import { loginFun , OutLoginFun} from '@/api/Login/index'
    // import { loginFun } from '@/api/Login/shipp'


    interface RuleForm {
    name: string
    password: string
   
    }

    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive<RuleForm>({
        name: '18736421733',
        password: '123456',
    })

    const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { min: 5, max: 18, message: '请输入正确的手机号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 18, message: '密码长度在 5 到 18 个字符', trigger: 'blur' },

    ],
   
    })

    const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loginFun(
                {
                    mobile: ruleForm.name,
                    password: ruleForm.password,
                }
                ).then(res=>{
                    console.log("登录成功",res)
                }
            )
            // loginFun(
            //     {
            //         username:"1",
            //         password:"1"
            //     }
            // ).then(res=>{
            //     console.log("登录成功",res);
                
            // })

        } else {
        console.log('error submit!', fields)
        }
    })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    }

    const ForgetSecret = (formEl: FormInstance | undefined) => {
        // 跳转到忘记密码页面
        // console.log('忘记密码')
        OutLoginFun().then(res=>{
            console.log("退出登录成功",res)
        })
    }



</script>

<style lang="less" scoped>
    .NewPage{
        display: flex;
        align-items: center;
        justify-content: center;
        .Logo{
            width: 60%;
        }
        .LoginForm{
            width: 40%;
        }
    }
    .ForgetSecret{
        margin-bottom: 18px;
        display: flex;
        justify-content: flex-end;
    }
    .FeatureLink{
        color: #409eff;
    }
    .FeatureLink:hover{
        // 改变鼠标样式
        cursor: pointer;
    }
</style>
<style>
    .login-btn{
        width: 100%;
        height: 36px;
        padding: 3px 0;
        box-sizing: border-box;
    }
</style>
